<template>
  <div>
    <h1>App</h1>
    <button @click="$router.push('/news')">新闻</button>
    <button @click="$router.push('/music')">音乐</button>
    <button @click="$router.push('/play')">娱乐</button>
    <!-- 
      使用router-view组件对路由组件进行占位
     -->
    <div :style="{ position: relative }">
      <transition>
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    console.log(this);
  },
};
</script>

<style>
@keyframes enter {
  from {
    opacity: 0;
    transform: translateX(-80px);
  }
}
@keyframes leave {
  to {
    opacity: 0;
    transform: translateX(80px);
  }
}
.v-enter-active {
  animation: enter 0.3s linear;
}
.v-leave-active {
  width: 100%;
  animation: leave 0.3s linear;
  position: absolute;
}
</style>
